<template>
  <div class="flex align-items-center m-y-10">
    <log-icon icon-name="log-tags" class="shrink-0" />
    <div>
      <router-link
        :to="`/users/${item.modifier.id}`"
        class="title link hover-underline"
        target="_blank"
      >{{ item.modifier.nickname }}</router-link>
      <template v-if="tags.remove.length">
        移除了标签
        <el-tag v-for="tag in tags.remove" :key="tag" size="mini">{{ tag }}</el-tag>
      </template>
      <template v-if="tags.add.length">
        {{ tags.remove.length && tags.add.length ? '并' : '' }}添加了标签
        <el-tag v-for="tag in tags.add" :key="tag" size="mini">{{ tag }}</el-tag>
      </template>
      <timeago2 :date-time="item.created_at" pre-text=" - " class="info-deep" />
    </div>
  </div>
</template>

<script>
import LogIcon from './log-icon';

export default {
  name: 'change-tags-item',
  components: { LogIcon },
  props: {
    item: Object,
  },
  computed: {
    tags() {
      const oldTags = this.item.mod.oldVal;
      const newTags = this.item.mod.newVal;
      const [add, remove] = [[], []];
      for (let i = 0; i < oldTags.length; i += 1) {
        if (newTags.indexOf(oldTags[i]) === -1) {
          remove.push(oldTags[i]);
        }
      }
      for (let i = 0; i < newTags.length; i += 1) {
        if (oldTags.indexOf(newTags[i]) === -1) {
          add.push(newTags[i]);
        }
      }
      return { add, remove };
    },
  },
};
</script>

<style></style>
